/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict';
import React, {
    Component,
} from 'react';

import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableHighlight,
    Alert,
    ListView,
    Dimensions,
    ScrollView
} from 'react-native';

import {Actions} from 'react-native-router-flux'
import CommonStyles from '../styles/common';
import OfflineNetView from './custom/offlineNetView';
import NewsItem from './newsItem'
import RefreshListView from './custom/refreshListView'
import { GetNewsListSource} from '../actions/newsActions';

export default class NewsList extends Component {
    constructor (props) {
        super(props)
    }
    
    renderRowView(news)
    {
        return (
            <NewsItem news={news}/>
        );
    }
    
    onFetch(page, callback, options) {
        if(!this.props.isNewRefreshing)
        {
            this._fetchData(0,20,page,callback).done();
        }
        
    }
    
    async _fetchData(catalog,pageSize,page, callback) {
        await this.props.dispatch(GetNewsListSource(catalog,page-1,pageSize));
        if (page === 5) {
            callback(this.props.newsLastestSource, {
                allLoaded: true, // the end of the list is reached
            });        
        } else {
            callback(this.props.newsLastestSource);
        }
    }

    render() {
        if(!this.props.isConnected)
        {
            return <OfflineNetView/>
        }
        return (
            <RefreshListView
                rowView={this.renderRowView.bind(this)}
                onFetch={this.onFetch.bind(this)}
                firstLoader={true} // display a loader for the first fetching
                pagination={true} // enable infinite scrolling using touch to load more
                refreshable={true} // enable pull-to-refresh for iOS and touch-to-refresh for Android
                withSections={false} // enable sections
                enableEmptySections={true}
                customStyles={{
                    paginationView: {
                        backgroundColor: '#FAFAFA',
                        marginBottom:50
                    },
                    actionsLabel:{
                        backgroundColor:'#FAFAFA'
                    }
                }}
                refreshableTintColor="blue"
            />
        );
    }
}
